const canvas = document.querySelector("#canvas") as HTMLCanvasElement;
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

canvas.width = 500;
canvas.height = 500;

interface Value {
  value: number;
  name: string;
}

class Sector {
  x: number;
  y: number;
  r: number;
  startAngle: number;
  endAngle: number;
  color: string;

  constructor(
    x: number,
    y: number,
    r: number,
    startAngle: number,
    endAngle: number,
    color: string
  ) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.startAngle = startAngle;
    this.endAngle = endAngle;
    this.color = color;
    this.draw();
  }

  draw(scale = 1) {
    ctx.beginPath();
    ctx.moveTo(this.x, this.y);
    // 绘制圆弧
    ctx.arc(this.x, this.y, this.r * scale, this.startAngle, this.endAngle);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
}

const values: Value[] = [
  { value: 4198, name: "Search Engine" },
  { value: 7135, name: "Direct" },
  { value: 5810, name: "Email" },
  { value: 4814, name: "Union Ads" },
  { value: 3010, name: "Video Ads" },
];

const total = values.reduce((pre, next) => pre + next.value, 0);
const sectors: Sector[] = [];

let startAngle = -Math.PI / 2; // 起始角度从顶部开始

// 根据值绘制角度
values.forEach((item, index) => {
  const sliceAngle = (item.value / total) * 2 * Math.PI;
  const endAngle = startAngle + sliceAngle;
  const color = `#${Math.random().toString(16).slice(2, 8).padEnd(6, "0")}`;
  sectors.push(
    new Sector(
      canvas.width / 2,
      canvas.height / 2,
      150,
      startAngle,
      endAngle,
      color
    )
  );
  startAngle = endAngle; // 更新 startAngle 为当前扇形的结束角度
});

// 绘制内圆，形成环状效果
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 75, 0, 2 * Math.PI);
ctx.globalCompositeOperation = "destination-out";
ctx.fill();
ctx.globalCompositeOperation = "source-over";

// 鼠标移入事件处理器
canvas.addEventListener("mouseenter", () => {
    canvas.style.cursor = 'default';
  });
  
  // 鼠标移动事件处理器
  canvas.addEventListener("mousemove", (event) => {
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;
  
    let hovered = false;
  
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  
    // 计算鼠标相对于画布中心的角度
    const dx = mouseX - canvas.width / 2;
    const dy = mouseY - canvas.height / 2;
    let angle = Math.atan2(dy, dx);
    if (angle < 0) angle += 2 * Math.PI; // 确保角度范围在 [0, 2 * Math.PI] 内
  
    // 遍历每个扇形，检查是否与鼠标位置相交
    sectors.forEach((sector, index) => {
      const startAngle = sector.startAngle;
      const endAngle = sector.endAngle;
  
      // 判断鼠标位置是否在当前扇形的角度范围内
      if (angle >= startAngle && angle <= endAngle) {
        const dx = mouseX - sector.x;
        const dy = mouseY - sector.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
  
        // 判断鼠标位置是否在当前扇形的半径范围内
        if (distance <= sector.r) {
          canvas.style.cursor = 'pointer';
          sector.draw(1.5); // 放大1.5倍
          hovered = true;
        }
      }
  
      // 绘制扇形
      sector.draw(); // 正常大小
    });
  
    // 重绘内圆，保持环状效果
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, 75, 0, 2 * Math.PI);
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fill();
    ctx.globalCompositeOperation = 'source-over';
  
    // 如果没有扇形被悬停，则恢复光标样式
    if (!hovered) {
      canvas.style.cursor = 'default';
    }
  });
  

ctx.font = "40px sans-serif";

ctx.fillText("Direct", 150, 200, 200);
